<template>
  <div class="myResourcesIndex" id="myResourcesIndex">
    <div :class="isOpenSide ? 'side-left side-close' : 'side-left'" @mouseenter="mouseenter" @mouseleave="mouseleave"
      @click.stop="needCancle">
      <div class="treeBox">
        <a-button class="addButton" type="primary" :disabled="creatAble" @click="addRecord">
          <template #icon>
            <span class="iconfont icon-Add iconadd"></span>
          </template>
          新建
        </a-button>
        <a-tree :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :selectedKeys="[channelId]"
          :tree-data="treeData" @expand="onExpand" :fieldNames="fieldNames" class="atree" @select="select">
          <template v-slot:title="record">
            <div class="column-text" v-if="record.groupName.indexOf(searchValue) > 0"
              @contextmenu.prevent="rightClick($event, record)">
              <div v-if="!record.edit">
                {{ record.groupName.substr(0, record.groupName.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{
                  record.groupName.substr(
                    record.groupName.indexOf(searchValue) + searchValue.length
                  )
                }}
              </div>
              <a-input v-else v-model:value="record.groupName" @blur="renameAddTreeSure($event, record, '')"></a-input>
              <ul @mouseleave="closeMenu" class="res-tree-menus" v-if="showMenus">
                <li class="res-tree-menus_item jee-hover-bg" v-for="(item, index) in menuLeftList"
                  @click="myMenusClick(item)" :key="index">
                  {{ item.text }}
                </li>
              </ul>
            </div>
            <div class="column-text" v-else @contextmenu.prevent="rightClick($event, record)">
              <div v-if="!record.edit">
                {{ record.groupName }}
              </div>
              <div v-if="record.edit" class="div-input" contenteditable="true" ref="DIV_ipt_ref"
                @blur="renameAddTreeSure($event, record, record.groupName)" placeholder="请输入栏目名称">
                {{ record.groupName }}
              </div>
              <ul @mouseleave="closeMenu" class="res-tree-menus" v-if="showMenus && record.groupName === selectName">
                <li class="res-tree-menus_item jee-hover-bg" v-for="(item, index) in menuLeftList"
                  @click="myMenusClick(item)" :key="index">
                  {{ item.text }}
                </li>
              </ul>
            </div>
          </template>
        </a-tree>
      </div>
      <div :class="isOpenSide ? 'open-right open-right-side' : 'open-right'" v-show="isShowIcon" @click="openorhideSide">
        <i v-if="isOpenSide" class="iconfonts iconfont icon-a-doubleright" style="font-size: 20px">
        </i>
        <i v-else class="iconfonts iconfont icon-a-doubleleft" style="font-size: 20px">
        </i>
      </div>
    </div>
    <div class="myResourcesRight">
      <a-button class="addButton" type="primary" :disabled="uploadAble" @click="toUploadFile()">
        上传 </a-button>
      <div class="select-content">
        <!-- <div class="selectLeft"> -->
        <div class="select-item">
          <div class="title">文件类型：</div>
          <a-select v-model:value="resData.suffix" :options="suffixOptions" @select="paramChange"
            class="titleSelect"></a-select>
        </div>
        <div class="select-item">
          <div class="title">关键词：</div>
          <a-input v-model:value="resData.fileName" placeholder="搜索文件名需包含首字符" @blur="paramChange"
            @pressEnter="paramChange" class=" titleSelect" allow-clear>
          </a-input>
        </div>
        <div class="select-item" v-show="!isSeachOpen">
          <div class="title">是否共享：</div>
          <a-select v-model:value="resData.isShare" :options="typeOptions" @select="paramChange"
            class="titleSelect"></a-select>
        </div>
        <div class="select-item" v-show="!isSeachOpen">
          <div class="title">创建时间：</div>
          <!-- <a-range-picker show-time v-model:value="timeValue" :valueFormat="valueFormat" @change="changeTime" /> -->
          <date-range-picker class="date-content" @change="changeTime" v-model:value="timeValue"
            :disabledInfo="{ type: 2, startDays: 0 }" :showTime="true" :valueFormat="valueFormat"></date-range-picker>
        </div>
        <!-- </div> -->

        <!-- <div class="select-item" v-show="!isOpen">
        <div class="title">内容模型：</div>
        <a-select
          v-model:value="resData.channelId"
          :options="modleOptions"
          @change="onSelectType8"
        ></a-select>
      </div> -->
        <div class="option-content">
          <a-button @click="resetOptions">重置</a-button>
          <!-- <a-button :style="{ 'margin-left': '8px' }" class="addButton" type="primary" @click="search()">搜索</a-button> -->
          <div class="openorclose" @click="seachclose" v-show="!isSeachOpen">
            <a>收起</a>
            <i class="iconfont icon-up" style="font-size: 24px"> </i>
          </div>
          <div class="openorclose" @click="seachclose" v-show="isSeachOpen">
            <a>展开</a>
            <i class="iconfont icon-down" style="font-size: 24px"> </i>
          </div>
        </div>
      </div>
      <baseTable :columns="columns.myResourcesColumns" :dataSource="resourcesData.records" :isSelect="true"
        :scroll="scroll" ref="resourcesList" :isShowPagination="isShowPagination" :showCheckDelete="showCheckDelete"
        :total="resourcesData.total" @changePage="changePage" :customRow="customRow">
        <template #bodyCell="{ column, text, record, index }">
          <template v-if="column.dataIndex === 'resourceAlias'">
            <div class="titleBox">
              <!-- <div v-if="record.resourceType !== 4" class="tabletypeImgBox">
                <a-image :src="record.resourceUrl" :preview="{ visible: false }" @click="visible = true"
                  class="tabletypeImg" />
                <div style="display: none">
                  <a-image-preview-group :preview="{
                    visible,
                    onVisibleChange: (vis: any) => (visible = vis),
                  }" class="opppqwq">
                    <a-image :src="record.resourceUrl" />
                  </a-image-preview-group>
                </div>
              </div> -->
              <div class="tabletypeImgBox">
                <i style="color:#85bcff;" v-if="record.resourceType == 1" class="iconfont icon-picture"></i>
                <i style="color:#c386f0" v-if="record.resourceType == 2" class="iconfont icon-video"></i>
                <i style="color:#a15fde;" v-if="record.resourceType == 3" class="iconfont icon-audio"></i>
                <i style="color:#62c558;" v-if="record.resourceType == 4" class="iconfont icon-attachments"></i>
                <i style="color:#4f6bf6;" v-if="record.resourceType == 5" class="iconfont icon-document"></i>
              </div>
              <a-input v-model:value="record.resourceAlias" placeholder="请输入文件名称" class="titleTip"
                v-if="index == renameIndex" @blur="renameSure(record)" allow-clear>
              </a-input>

              <table-tool-tip :text="record.resourceAlias" :column="column" class="titleTip" :otherWidth="96" v-else>
                <span class="titleTip">{{ record.resourceAlias }}</span>
              </table-tool-tip>
            </div>
          </template>
          <template v-if="column.dataIndex === 'resourceType'">
            <span>{{ getSourceType(record.resourceType) }}</span>
          </template>
          <template v-if="column.dataIndex === 'oparation'">
            <a class="eidtRecords" :class="{ disable: detailAble }" @click="detailsRecord(record)">详情</a>
            <a class="eidtRecords" :class="{ disable: renameAble }" @click="renameRecord(index)">重命名</a>
            <a class="eidtRecords" :class="{ disable: shareAble }" @click="sharingRecord([record.id], false)"> 共享
            </a>
            <a class="eidtRecords" :class="{ disable: offShareAble }" @click="sharingRecord([record.id], true)"
              v-if="record.shared">取消共享
            </a>
            <a class="eidtRecords" :class="{ disable: moveAble }" @click="moveRecord([record.id])">移动</a>
            <a-popconfirm placement="topRight" :disabled="deleteAble" @confirm="deleteResource(record)">
              <template #title>
                <p style="width: 197px">是否删除该资源，删除后共享资源将同步删除</p>
              </template>
              <a :class="{ disable: deleteAble }" class="eidtRecords">删除</a>
            </a-popconfirm>
          </template>
        </template>
        <template #otherOpration>
          <!-- <a-button :style="{ 'margin-left': '8px' }" :disabled="!rowSelection.length"
            @click="sharingRecord(resourcesList.selectedRowKeys, false)">共享</a-button> -->
          <a-button :style="{ 'margin-left': '8px' }" :disabled="!rowSelection.length || offShareAble"
            @click="cancleShare()">取消共享</a-button>
          <a-button :style="{ 'margin-left': '8px' }" :disabled="!rowSelection.length || moveAble"
            @click="moveRecord(resourcesList.selectedRowKeys)">移动</a-button>
          <a-button :style="{ 'margin-left': '8px' }" :disabled="!rowSelection.length || downloadAble"
            @click="downloadtemp(resourcesList.selectedRowKeys)">下载</a-button>
          <a-button :style="{ 'margin-left': '8px' }" :disabled="!rowSelection.length || deleteAble"
            @click="deleteRecordSelect()">删除</a-button>
        </template>
      </baseTable>
    </div>
  </div>
  <details1 v-if="isdetailsVisible" :isVisible="isdetailsVisible" @handleCancle="handleCancle" :detailData="detailData">
  </details1>
  <sharing v-if="issharingVisible" :isVisible="issharingVisible" @handleCancle="handleCancle"
    :resourcesIds="resourcesIds">
  </sharing>
  <!-- 资源库上传模态框 -->
  <base-modal :width="modAlProps.width" :isVisible="isOpenUpload || ismoveVisible" :title="modAlProps.title"
    :buttons="buttons" @handleOk="buttonMessage"
    @handleCancle="(isOpenUpload = false, ismoveVisible = false, resourcesForm.resetFields())" class="resource_modal">
    <template v-slot:body>
      <a-form name="resource-upload" class="resource-upload" autoComplete="off" :model="formState" ref="resourcesForm">
        <a-form-item :label="formState.selectGroup.label" :name="['selectGroup', 'value']"
          :rules="[formState.selectGroup.rule]">
          <a-tree-select style="width: 508px;" class=" AtreeSelect" placeholder="请选择分组"
            v-model:value="formState.selectGroup.value" show-search
            :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" allow-clear treeNodeFilterProp="groupName"
            :fieldNames="{ children: 'children', label: 'groupName', value: 'id' }" tree-default-expand-all
            :tree-data="selectTreeData">
          </a-tree-select>
        </a-form-item>
        <a-form-item v-if="isOpenUpload" :name="['uploadFileResource', 'value']"
          :label="formState.uploadFileResource.label" :rules="[formState.uploadFileResource.rule]">
          <upload :action="props_upload.action" :fileList="props_upload.fileList" :accept="props_upload.accept"
            :multiple="true" maxCount="" :title="'文件上传'" :hiddTips="props_upload.hiddTips"
            :directory="props_upload.directory" :isAutoUpload="props_upload.isAutoUpload"
            :listType="props_upload.listType" @uploadChangeFinished="uploadFileResources">
          </upload>
        </a-form-item>
      </a-form>
    </template>
  </base-modal>
  <!-- 添加用户模态框 -->
  <base-modal :width="modAlProps.width" :isVisible="isAddUserVisible" :title="modAlProps.title" :buttons="buttons"
    @handleOk="buttonAddUserMessage" @handleCancle="(isAddUserVisible = false, modAlProps.title = '共享到')"
    class="addOrgUser_modal">
    <template v-slot:body>
      <div class="modal_table">
        <div class="table-header">
          <p class="org-text">所属组织：</p>
          <a-select class="modal-select" v-model:value="formState.upOrg.value" placeholder="请选择"
            :options="upOrgOptions.map((item: any, index: number) => ({ value: item.id, label: item.name, disabled: item.disabled }))"
            @change="changeMember"></a-select>
          <div class="searchContent">
            <a-input v-model:value="searchName" placeholder="搜索用户名或真实姓名" style="width: 192px">
              <template #suffix>
                <i class="iconfont icon-search" @click="onSearch"></i>
              </template>
            </a-input>
          </div>
        </div>
        <!-- 添加用户表格展示部分 -->
        <div class="baseTable">
          <baseTable :columns="columnsSys.addMemberColumnsResource" :dataSource="addmemberData.records" :isSelect="true"
            :scroll="{ y: 200 }" ref="addmemeberBaseTables" :isShowPagination="isShowPagination"
            :showCheckDelete="showCheckDelete" :selectedRowKeys="rowSelectedKey" :total="addmemberData.total"
            @changePage="changePageOrg">
          </baseTable>
        </div>
      </div>
    </template>
  </base-modal>
  <!-- 添加组织模态框 -->
  <base-modal :width="modAlProps.width" :isVisible="isAddOrgVisible" :title="modAlProps.title" :buttons="buttons"
    @handleOk="buttonAddOrgMessage" @handleCancle="isAddOrgVisible = false, modAlProps.title = '共享到'"
    class="addOrgUser_modal">
    <template v-slot:body>
      <div class=" modal_table">
        <div class="table-header">
          <p class="org-text">选择组织：</p>
          <div class="searchContent">
            <a-input v-model:value="searchOrg" placeholder="搜索组织名称" style="width: 508px" @blur="searchOrgList">
              <template #suffix>
                <i @click="searchOrgList" class="iconfont icon-search"></i>
              </template>
            </a-input>
          </div>
        </div>
        <a-tree v-model:expandedKeys="expandedKeysOrg" v-model:selectedKeys="selectedKeys"
          v-model:checkedKeys="checkedKeys" :fieldNames="{ title: 'name', key: 'id', children: 'children' }" checkable
          :treeData="treeDataOrg">
          <template #title="{ name, id }">
            <span>{{ name }}</span>
          </template>
        </a-tree>
      </div>
    </template>
  </base-modal>
  <!-- 共享模态框 -->
  <base-modal :width="modAlProps.width" :isVisible="isShareVisible" :title="modAlProps.title" :buttons="buttons"
    @handleOk="buttonShareMessage" @handleCancle="isShareVisible = false" class="share_modal">
    <template v-slot:body>
      <div class="share-box">
        <div class="share-org">
          <div class="share-org-title">
            <span class="share-org-title-text">组织</span>
            <div class="share-org-title-add" @click="openSelectOrg()">
              <i class="iconfont icon-new"></i>
              <span class="share-org-title-text">添加</span>
            </div>
            <a-checkbox class="checkbox-all" v-model:checked="isSelectOrgAll" @change="changeSelectOrgAll">
              <span>全选</span>
            </a-checkbox>
          </div>
          <div class="share-org-content">
            <div v-for="( item, index ) in  selectOrg " :key="item.id" class="org-user-list">
              <a-tooltip v-if="item.name.length > 6" :title="item.name">
                <a-tag :closable="true" @close="handleClose(item, 'org')">
                  {{ `${item.name.slice(0, 6)}...` }}
                </a-tag>
              </a-tooltip>
              <a-tag v-else :closable="true" @close="handleClose(item, 'org')">
                {{ item.name }}
              </a-tag>
            </div>
          </div>
        </div>
        <div class="share-org">
          <div class="share-org-title">
            <span class="share-org-title-text">用户</span>
            <div class="share-org-title-add" @click="openSelectUser()">
              <i class="iconfont icon-new"></i>
              <span class="share-org-title-text">添加</span>
            </div>
          </div>
          <div class="share-org-content">
            <div v-for="( item, index ) in  selectUser " :key="item.id" class="org-user-list">
              <a-tooltip v-if="item.userName.length > 6" :title="item.userName">
                <a-tag :closable="true" @close="handleClose(item, 'user')">
                  {{ `${item.userName.slice(0, 6)}...` }}
                </a-tag>
              </a-tooltip>
              <a-tag v-else :closable="true" @close="handleClose(item, 'user')">
                {{ item.userName }}
              </a-tag>
            </div>
          </div>
        </div>

      </div>
    </template>
  </base-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch, reactive, onMounted, nextTick, createVNode } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import details1 from "./details.vue";
import sharing from "./sharing.vue";
import move from "./move.vue";
import { scrollType, modeProp } from "@/type.d";
import { getTableScroll } from "@/components/table/tableConfig/table";
import columns from "@/components/table/tableConfig/tableColumn/systemTableColumn";
import columnsSys from "@/components/table/tableConfig/columnsName";
import globalFun from "@/utils/global";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { dataSourceType, detailDataItemType } from "@/type";
import { Modal, message } from "ant-design-vue";
import type { TreeProps } from "ant-design-vue";
import msgModal from "@/components/modal/modelConfig/MsGModal";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";
import baseModal from "@/components/modal/baseModal.vue";
import upload from "@/components/upload/fileUpload.vue";
import request from "@/api/index";
import { request as $axios } from "@/api/axios";
import getters from "@/store/getters";
import { randomWord } from "@/utils/common";
import { cloneDeep } from "lodash";
import { routerPerm } from '@/utils/common';
const fieldNamesOrg = reactive({ title: "name", key: "id", children: 'children' });
const tabsList = [
  {
    tabName: "内容列表",
    key: 1,
  },
  {
    tabName: "归档列表",
    key: 2,
  },
];
//树结构数据
const fieldNames = reactive<dataSourceType>({
  title: "groupName",
  key: "id",
});

// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
// data
const creatAble = ref<boolean>(false);
const uploadAble = ref<boolean>(false);
const detailAble = ref<boolean>(false);
const renameAble = ref<boolean>(false);
const shareAble = ref<boolean>(false);
const moveAble = ref<boolean>(false);
const deleteAble = ref<boolean>(false);
const downloadAble = ref<boolean>(false);
const offShareAble = ref<boolean>(false);
const addmemeberBaseTables = ref<any>({ selectedRowKeys: [] }); // 添加成员basetable的ref
const resourcesForm = ref<any>("resourcesForm");
const modAlProps: modeProp = reactive({
  width: "M",
  title: "上传资源",
});
const searchName = ref<string>('')
const searchOrg = ref<string>('')
const isSelectOrgAll = ref<boolean>(false)
const reasource_treeSelect = ref<any>(null);
let detailData = reactive<dataSourceType>({})
let datas = reactive<dataSourceType>({});
let datasOrg = reactive<dataSourceType>({});
const searchValue = ref<string>("");
const expandedKeys = ref<(any)[]>([]);
const shareIds = ref<(string | number)[]>([]);
const selectOrg = ref<(dataSourceType)[]>([]);
const selectUser = ref<(dataSourceType)[]>([]);
const autoExpandParent = ref<boolean>(true);
const isOpenUpload = ref<boolean>(false);
const isAddUserVisible = ref<boolean>(false);
const isAddOrgVisible = ref<boolean>(false);
const isShareVisible = ref<boolean>(false);
const treeData = ref<TreeProps["treeData"]>();
const selectTreeData = ref<TreeProps["treeData"]>();
const dataList: TreeProps["treeData"] = [];
const isOpen = ref<boolean>(true); //是否展开或收起.
const isSeachOpen = ref<boolean>(true); //是否展开或收起.
const channelId = ref<number>(0);
const userInfo = getters.userInfo();
const isOpenSide = ref<boolean>(false);
const isShowIcon = ref<boolean>(false);
const valueFormat = ref("YYYY-MM-DD HH:mm:ss");
const timeValue = ref<(string | number)[]>([]);
const isShowPagination = ref<boolean>(true); // 是否需要配分页器
const visible = ref<boolean>(false);
const showMenus = ref<boolean>(false);
const left = ref<number>(0); // 菜单位置
const top = ref<number>(0);
let buttons = ref<any[]>([]);
// div输入框ref；
const DIV_ipt_ref = ref();
// const renameType = ref<boolean>(false); //重命名输入框
const renameIndex = ref<string | number>(); //重命名下表
const addParams = ref<dataSourceType>({});
const showCheckDelete = true; // 是否需要分页器中的自定义
const upOrgOptions = ref<dataSourceType[]>([])//选择组织的选项
const groupId = ref<string | number>(); //资源id
const selectName = ref<string>('');
const ids = ref<number[]>([]);
const resourcesIds = ref<(string | number)[]>([]); //资源id
const isdetailsVisible = ref<boolean>(false); //详情弹窗
const issharingVisible = ref<boolean>(false); //共享弹窗
const ismoveVisible = ref<boolean>(false); //移动弹窗
let isDisabled = ref<boolean>(false); //移动弹窗
let addmemberrowSelection = ref<(string | number)[]>([]);

buttons = computed(() => {
  let arr: dataSourceType[] = [];
  if (!selectOrg.value.length && !selectUser.value.length && !isAddOrgVisible.value && !isAddUserVisible.value && !isSelectOrgAll.value && !isOpenUpload.value && !ismoveVisible.value) {
    arr = [{
      text: "确定",
      "html-type": "submit",
      keepAlive: true,
      disabled: true
    }]
  } else {
    arr = [{
      text: "确定",
      "html-type": "submit",
      keepAlive: true,
    }]
  }
  return arr
});
const treeDataOrg = ref<any[]>([]);
const expandedKeysOrg = ref<any[]>([]);
const selectedKeys = ref<any[]>([]);
const checkedKeys = ref<any[]>([]);
const cancleIds = ref<any[]>([]);
const allOrgKey = ref<number[]>([]);
const rowSelectedKey = ref<number[]>([]); // 选择用户列表回显；
const resourcesList = ref<any>({
  selectedRowKeys: [],
}); //
const selectTreeId = ref();
// 右键菜单数据
const menuLeftList = [
  {
    key: "1",
    text: "新建",
    //   disabled: !this._checkPermission('/resourceSpace', 'POST')
  },
  {
    key: "2",
    text: "重命名",
    //   disabled: !this._checkPermission('/resourceSpace', 'PUT')
  },
  {
    key: "3",
    text: "删除",
    //   disabled: !this._checkPermission('/resourceSpace', 'DELETE')
  },
];
let rowSelection = ref<(string | number)[]>([]);
//表格数据
let resourcesData = reactive<dataSourceType>({ records: [] });
let scroll: scrollType = reactive({ y: "", isFixed: false });
//验证批量上传
const checkNameForm = async (_rule: dataSourceType = {}, value: any, callback: any = () => { }) => {
  await function () { }()// 防止有些数据结构，比如数组的长度变化时，vue监听不到，所以添加一个空的await阻止一下下面的promise
  if (_rule.required) {
    if (value === '' || value === undefined || (_rule.type == 'array' && !value.length)) {
      return Promise.reject(`${_rule.msg1}`);
    } else {
      return Promise.resolve()
    }
  } else {
    return Promise.resolve()
  }
};
const formState = reactive<dataSourceType>({
  selectGroup: {
    value: undefined,
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "资源分组不能为空！",
    },
    label: "选择分组",
  },
  uploadFileResource: {
    //批量上传
    value: [] as any, //接收批量上传文件传来的emit('');
    rule: {
      required: true,
      trigger: ["change"],
      msg1: '请上传文件！',
      type: 'array',
      validator: checkNameForm
    },
    label: "选择文件:",
  },
  upOrg: {
    value: '全部',
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "组织不可为空！",
    },
    label: "选择组织",
  },
});
// 模板文件上传配置
const props_upload = reactive<dataSourceType>({
  action: "", //
  accept: "",
  directory: false,
  hiddTips: true,
  listType: "text",
  fileList: [], // 已上传的文件
  isAutoUpload: false, //是否自动上传
});

let addmemberData = reactive<configDataType>({ total: 0, size: 10, records: [] });

let resData: dataSourceType = ref({
  //头部筛选请求参数格式
  suffix: null,
  fileName: null,
  isShare: null,
  createTimeEnd: null,
  createTimeStart: null,
  pageNum: 1,
  pageSize: 10,
});
const typeOptions = [
  { label: "全部", value: null },
  { label: "是", value: 1 },
  { label: "否", value: 0 },
];
const suffixOptions = ref<dataSourceType[]>([
  { label: "全部", value: null }
]);
const treeToTileData = ref<any[]>([])
//methods
//点击左边取消右键谈起的选择菜单
const needCancle = () => {
  showMenus.value = false
}

//获取栏目层级树列表
const fetchResourceGroupTreeList = async () => {
  let data = await request.fetchResourceGroupTreeList();
  nextTick(() => {
    let obj = {
      groupName: "默认分组",
      id: 0,
      children: [],
      edit: false,
      isAdd: false,
      parentId: 0,
    };
    treeData.value = [obj, ...data];
    formState.selectGroup.value = 0
    dataList.push(...data);
    treeToTileData.value = treeToTile(JSON.parse(JSON.stringify(treeData.value)));
  })

};
//展开和收起全部的操作
const onExpand = (keys: string[]) => {
  expandedKeys.value = keys;
  autoExpandParent.value = false;
};
const parentKey = ref<(string | number)[]>([]);

//获取父级id集合
const getParentKey = (id: string | number, data: dataSourceType) => {
  // for (let i = 0; i < data.length; i++) {
  //   if (id == data[i].id) {
  //     parentKey.value.push(id);
  //     console.log(data[i]?.parentId, 'data[i]?.parentId')
  //     if (data[i]?.parentId) {
  //       getParentKey(data[i]?.parentId, data);
  //     }
  //     continue
  //   }
  // }
  data.forEach((item: any) => {
    if (item.id == id) {
      parentKey.value.push(item.id);
      if (item.parentId) {
        getParentKey(item.parentId, data);
      }
    }
  })
  console.log(parentKey.value, 'parentKey.value');
};

const getParLoopKeys = (arr: any, id: any) => {
  arr?.length && arr.forEach((item: any) => {
    if (item.id == id) {
      expandedKeys.value.push(id)
      if (item?.parentId) {
        expandedKeys.value.push(item.parentId)
      }
    } else if (item?.children && item?.children.length) {
      getParLoopKeys(item.children, id)
    }
  })
}

const findParentId = (currentId: any) => {
  getParLoopKeys(treeData.value, currentId)
}

//选择分组下的资源库
const select = (item: any) => {
  // if (DIV_ipt_ref.value) {
  //   DIV_ipt_ref.value.focus();
  //   DIV_ipt_ref.value.blur();
  // }
  if (item.length) {
    findParentId(item[0])
    const set = new Set(expandedKeys.value)
    expandedKeys.value = [...set]
    channelId.value = item[0];
    // formState.selectGroup.value = item[0];
    selectTreeId.value = item[0];
    getResourcePageList();
  }

};
const seachclose = () => {
  isSeachOpen.value = !isSeachOpen.value;
};

//查询组织
const searchOrgList = async () => {
  const data = await request.fetchUserOrgList({ name: searchOrg.value });
  treeDataOrg.value = data;
}
const openorclose = () => {
  isOpen.value = !isOpen.value;
  if (isOpen.value) {
    expandedKeys.value = [];
  } else {
    traversal(dataList);
  }
};
const traversal = (data: any) => {
  data.map((item: any) => {
    parentKey.value.push(item.id);
    if (item.children) {
      traversal(item.children);
    }
  });
  expandedKeys.value = parentKey.value;
};
//展开收起侧边栏
const openorhideSide = () => {
  isOpenSide.value = !isOpenSide.value;
};

//侧边栏鼠标移入事件
const mouseenter = () => {
  isShowIcon.value = true;
};

//侧边栏鼠标移出事件
const mouseleave = () => {
  isShowIcon.value = isOpenSide.value ? true : false;
};
const addRecord = () => {
  const set = new Set(expandedKeys.value)
  expandedKeys.value = [...set]
  loop(treeData.value, { id: channelId.value }, 1);
};
const eidtRecord = async (item: dataSourceType) => { };
// 打开详情弹窗
const detailsRecord = async (record: any) => {
  if (detailAble.value) return
  detailData = await request.resourceDetail({ id: record.id }) || {};
  detailData.resourceUrl = record.resourceUrl;
  nextTick(() => {
    isdetailsVisible.value = true;
  })
};

const downloadtemp = async (ids: any[]) => {
  // 下载资源库文件
  await request
    .resourceDownLoad({ ids })
    .then((res: any) => {
      globalFun.downloadFile(res, decodeURI(res['content-disposition']));
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//添加
const fetchMemberAdduserPage = async () => {
  const data: {} = {
    pageNumber: datasOrg.pageNumber || 0,
    pageSize: datasOrg.pageSize || 10,
    // excludeOrgId: '',
    name: searchName.value || '',
    orgIds: formState.upOrg.value === '全部' ? '' : formState.upOrg.value,

  };
  isAddUserVisible.value = true;
  modAlProps.title = "添加用户";
  const memberData = (await request.fetchMemberAdduserPage(data)) || {};
  let reqData = memberData;
  let sourceData = reactive<dataSourceType>({});
  const records: any[] = [];
  nextTick(() => {
    reqData?.records?.map((item: any, index: number) => {
      sourceData = {
        realName: item.realName,
        orgName: item.orgName,
        userName: item.userName,
        orgId: item.orgId,
        id: item.id,
      };
      records.push(sourceData);
    });
    addmemberData.total = reqData.total;
    addmemberData.size = reqData.size;
    addmemberData.records = records;
  })
}

//搜索用户名或真实姓名
const onSearch = () => {
  fetchMemberAdduserPage();
}

//分组重命名和新增
const renameAddTreeSure = async (e: any, data: dataSourceType, oldName: any) => {
  addParams.value = data.data;
  if (!e.target.value && !e.target.innerText) {
    loop(treeData.value, { id: data.parentId }, 1, true);
    return
  }
  if (data.isAdd) {
    if (e.target.value || e.target.innerText) {
      fetchResourceGroupAdd(e.target.value || e.target.innerText, data);
    }

  } else {
    if (e.target.value || e.target.innerText) {
      if (oldName === e.target.innerText) {
        fetchResourceGroupTreeList();
        return;
      }
      renameTreeSure(e.target.value || e.target.innerText, data);
    }
  }
};


//分组新增
const fetchResourceGroupAdd = async (groupName: string, data: dataSourceType) => {
  request
    .fetchResourceGroupAdd({
      groupName,
      parentId: data.parentId,
      userId: userInfo.userId,
    })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        fetchResourceGroupTreeList();
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//分组重命名
const renameTreeSure = async (groupName: string, data: dataSourceType) => {
  request.fetchResourceGroupRename({
    groupName,
    parentGroupId: data.parentId,
    groupId: data.id
  }).then((res: any) => {
    if (res.code == "00000 00000") {
      fetchResourceGroupTreeList();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  }).catch((err: any) => {
    throw new Error(err);
  });
};
//分组删除
const fetchResourceGroupDelete = async (id: number | string) => {
  request.fetchResourceGroupDelete({
    groupId: groupId.value
  }).then((res: any) => {
    if (res.code == "00000 00000") {
      fetchResourceGroupTreeList();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  }).catch((err: any) => {
    throw new Error(err);
  });

};

// 重命名
const renameRecord = (index: any) => {
  if (renameAble.value) return
  renameIndex.value = index;

};
// 确定重命名
const renameSure = (record: dataSourceType) => {
  if (!record.resourceAlias) { return }
  renameIndex.value = -1;
  request.resourceRename({
    id: record.id,
    newName: record.resourceAlias
  }).then((res: any) => {
    if (res.code == "00000 00000") {
      getResourcePageList();
      message.success(res.message);
    } else {
      message.error(res.message);
      getResourcePageList();
    }
  }).catch((err: any) => {
    throw new Error(err);
  });
};

//获取组织的全部id
const getAllOrgKey = (data: dataSourceType) => {
  data.length && data.map((item: any) => {
    if (!allOrgKey.value.find((jitem: number) => jitem === item.id)) {
      allOrgKey.value.push(item.id)
    }
    if (item.children && item.children.length) {
      getAllOrgKey(item.children)
    }
  })
}
// 打开共享弹窗
const sharingRecord = async (ids: any, isShare: boolean) => {
  if (shareAble.value) return
  if (isShare) {
    cancleIds.value = ids
    cancleShare('single')
    return
  }
  isSelectOrgAll.value = false
  const data = await request.fetchOrgUserCommonOrgTree();
  getAllOrgKey([data])
  expandedKeysOrg.value = allOrgKey.value;
  const sharedIds = await request.resourceShareResourceDetail({ id: ids });
  //
  nextTick(() => {
    shareIds.value = ids;
    sharedIds.orgNameDtoList ? (checkedKeys.value = sharedIds.orgNameDtoList.map((item: dataSourceType) => item.id) && (selectOrg.value = sharedIds.orgNameDtoList)) : (checkedKeys.value = [] && (selectOrg.value = []));
    // 
    sharedIds.userNameDtoList ? (rowSelectedKey.value = sharedIds.userNameDtoList.map((item: dataSourceType) => item.id) && (selectUser.value = sharedIds.userNameDtoList)) : (rowSelectedKey.value = [] && (selectUser.value = []));
    modAlProps.title = '共享到';
    isShareVisible.value = true;
  })

};

const findDisable = (arr: any) => {
  arr.forEach((item: any) => {
    if (item.id && item.id === channelId.value) {
      item.disabled = true
    } else if (item.children && item.children.length) {
      findDisable(item.children)
    }
  })
}

// 打开移动弹窗
const moveRecord = (idArr: number[]) => {
  if (moveAble.value) return
  selectTreeData.value = JSON.parse(JSON.stringify(treeData.value))
  findDisable(selectTreeData.value)
  ids.value = idArr
  ismoveVisible.value = true;
  modAlProps.title = '移动到'
};

//取消共享弹窗
const cancleShare = (type: string = '') => {
  let cancleIdList: number[] = []
  if (resourcesList.value.selectedRowKeys.length) {
    resourcesData.records.length && resourcesData.records.map((item: any) => {
      resourcesList.value.selectedRowKeys.map((itemId: any) => {
        if (item.id === itemId && item.shared) {
          cancleIdList.push(item.id)
        }
      })
    })
  }
  let ids: number[] = type === 'single' ? cancleIds.value.length ? cancleIds.value : [] : cancleIdList;
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: '',
      content: "确定取消共享？取消后已选资源将从共享资源内移除",
      centered: true,
      icon: createVNode("i", {
        class: "iconfont icon-warn warning_ICON",
      }),
      cancelText: "取消",
      okText: "确定",
      onOk: async () => {
        await cancleShareAll(ids);
        nextTick(() => {
          cancleIds.value = [];
        })
        cancleIds.value = [];
      },
      onCancel() {
        cancleIds.value = []
        Modal.destroyAll();
      },
    }));
}


//取消共享接口
const cancleShareAll = async (ids: number[]) => {
  const param = {
    ids
  }
  request.resourceUnShare(param).then((res: dataSourceType) => {
    //直接调接口
    if (res.code === "00000 00000") {
      getResourcePageList()
      cancleIds.value = []
      resourcesList.value.selectedRowKeys = [];
      message.success(res.message);
    }
  })
}

// 单个删除资源
const deleteResource = (data: any) => {
  deleteRecords([data.id])
};

// 批量删除
const deleteRecordSelect = () => {
  let ids: (string | number)[] = rowSelection.value;
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: '',
      content: "是否删除所选的资源？删除后共享资源将同步删除",
      centered: true,
      icon: createVNode("i", {
        class: "iconfont icon-warn warning_ICON",
      }),
      cancelText: "取消",
      okText: "确定",
      onOk: async () => {
        await deleteRecords(ids);
      },
      onCancel() {
        Modal.destroyAll();
      },
    }));
};


// 删除接口
const deleteRecords = async (ids: (string | number)[] = []) => {
  // 调接口删除组织
  await request.resourceDelete({ ids }).then((res: any) => {
    if (res.code == "00000 00000") {
      getResourcePageList();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  });
};


// 根据分组获取资源库分页列表
const getResourcePageList = async () => {
  resourcesList.value.selectedRowKeys = [];// 清除之前的选中
  const params: dataSourceType = {
    shared: resData.value.isShare,
    startDate: resData.value.createTimeStart,
    endDate: resData.value.createTimeEnd,
    groupId: channelId.value,
    pageNumber: datas.pageNumber || 1,
    pageSize: datas.pageSize || 10,
    referenceIdList: '',
    resourceAlias: resData.value.fileName,
    suffix: resData.value.suffix
  }
  let data = await request.resourcePageList(params);
  data.records.forEach((item: dataSourceType) => {
    item.isShare = item.shared ? '已共享' : '未共享'
  })
  resourcesData.records = data.records;
  resourcesData.total = data.total;
  nextTick(() => {
    let obj = getTableScroll(74, "myResourcesIndex", 150);
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
}

// 资源--文件类型筛选列表
const resourceFileTypeList = async () => {
  let data = await request.resourceFileTypeList() || [];
  let arr: any = Array.from(new Set(data))
  arr.length && arr.map((item: string) => {
    if (item) {
      let obj = { label: item, value: item }
      suffixOptions.value.push(obj);
    }
  })
  props_upload.accept = data.join(',')
}
// 时间选择
const changeTime = (data: any) => {

  resData.value.createTimeStart = data ? data[0] : '';
  resData.value.createTimeEnd = data ? data[1] : '';
  console.log(data, 'data')
  getResourcePageList()
};
// 条件发生变化
const paramChange = () => {
  getResourcePageList()
}
// 重置
const resetOptions = () => {
  resData.value = {
    //头部筛选请求参数格式
    suffix: null,
    fileName: null,
    isShare: null,
    createTimeEnd: null,
    createTimeStart: null,
    pageNum: 1,
    pageSize: 10,
  };
  timeValue.value = [];
  getResourcePageList()
};

//打开上传弹窗
const toUploadFile = () => {
  selectTreeData.value = treeData.value
  isOpenUpload.value = true;
  formState.selectGroup.value = channelId.value
  formState.uploadFileResource.value = [];
  modAlProps.title = '上传资源'
}
// 搜索
const search = () => {
  getResourcePageList()
};
// 右键点击
const rightClick = (e: any, data: any) => {
  if (data.groupName === '默认分组') {
    return
  }
  showMenus.value = true;
  // left.value = e.clientX;
  // top.value = e.clientY;
  selectName.value = data.groupName
  addParams.value = data.data;
  groupId.value = data.id;
};

//栏目右键弹起
const myMenusClick = (data: any) => {
  switch (data.key) {
    case "1":
      loop(treeData.value, addParams.value, data.key);
      break;
    case "2":
      loop(treeData.value, addParams.value, data.key);
      break;
    case "3":
      Modal.confirm({
        content: "是否删除该分组？删除后分组中资源将归属到默认分组",
        centered: true,
        icon: createVNode("i", {
          class: "iconfont icon-warn warning_ICON",
        }),
        cancelText: "取消",
        okText: "确定",
        onOk: async () => {
          await fetchResourceGroupDelete(data.id)
        },
        onCancel() {
          Modal.destroyAll();
        },
      });
      break;
  }
  setTimeout(() => {
    // /
    console.log(parentKey.value, 'parentKey.value')
    //[1510, 1202, 905]
    expandedKeys.value = JSON.parse(JSON.stringify(parentKey.value));
  }, 400)
  setTimeout(() => {
    if (DIV_ipt_ref.value) {
      DIV_ipt_ref.value.focus();
    }
  }, 1000)
};
const loop = async (data: any, addParams: any, type: any, isDelete: boolean = false) => {
  if (type == 1) {
    // resetData(data);
  }
  if (addParams && addParams.id == 0 && !channelId.value && isDelete) {
    data.pop();
    return
  }
  if (!addParams.id && type == 1 && !isDelete) {
    let obj = {
      groupName: "",
      id: null,
      children: [],
      edit: true,
      isAdd: true,
      parentId: 0,
    };
    data.push(obj);
    return
  }
  await resetData(data, addParams, type, isDelete);
};
const resetData = (data: any, addParams: any, type: any, isDelete: boolean = false) => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].id == addParams.id) {
      // 修改值
      type == 2 ? (data[i].edit = true) : (data[i].edit = false);
      // type == 3 ? data.splice(i, 1) : ""; //删除值
      if (type == 1 && !isDelete) {
        let obj = {
          groupName: "",
          id: null,
          children: [],
          edit: true,
          isAdd: true,
          parentId: data[i].id,
        };
        data[i].children = data[i].children && data[i].children.length ? data[i].children : [];
        data[i].children.push(obj);
        parentKey.value = [];
        getParentKey(data[i].id, treeToTileData.value);
      } else if (type == 1 && isDelete) {
        data[i].children.pop();
      }
    } else {
      if (data[i].children instanceof Array && data[i].children.length) {
        loop(data[i].children, addParams, type, isDelete);
      }
    }
  }

}
const closeMenu = () => {
  showMenus.value = false;
};
// computed
rowSelection = computed(() => {
  return resourcesList.value.selectedRowKeys;
});

addmemberrowSelection = computed(() => {
  return addmemeberBaseTables.value.selectedRowKeys
});


// 关闭弹窗
const handleCancle = () => {
  isdetailsVisible.value = false;
  issharingVisible.value = false;
  ismoveVisible.value = false;
};
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  datas = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getResourcePageList()
};

// 上传文件和移动分组
const buttonMessage = async (msg: dataSourceType) => {
  //保存
  resourcesForm.value
    .validate()
    .then(() => {
      //移动
      if (modAlProps.title === '移动到') {
        const param = {
          groupId: formState.selectGroup.value,
          ids: ids.value
        }
        request.resourceMove(param).then((res: dataSourceType) => {
          //直接调接口
          if (res.code === "00000 00000") {
            getResourcePageList()
            message.success(res.message);
            ismoveVisible.value = false;

            resourcesForm.value.resetFields()
          }
        })
      } else {
        //上传
        //通过append向form对象添加数据
        // const options = formState.uploadFileResource.value
        let fileList = formState.uploadFileResource.value.length;
        formState.uploadFileResource.value.forEach((item: dataSourceType) => {
          item.file.status = "success";
          const param = new FormData(); // 创建form对象
          param.append(
            "files",
            item.file,
            item.file.name
          );
          param.append("watermark", "0");
          param.append("groupId", formState.selectGroup.value || 0);
          param.append("resourceVisible", "1");
          // console.log(param, "param");
          let headers: Record<string, any> = {
            "Content-Type":
              "multipart/form-data; boundary=----WebKitFormBoundary1kBB8pgsKICPa9RM",
          };
          
          $axios
            .post("/server-admin/res/upload", param, {
              headers: headers,
              onUploadProgress: ({ total, loaded }) => {
                if (total) {
                  let pp =
                    Math.round((loaded / total) * 100) < 100
                      ? Math.round((loaded / total) * 100).toFixed(1)
                      : (100 - Math.random() * 10).toFixed(1);
                  if (item.onProgress) {
                    //留足大图片渲染时间
                    item.onProgress(
                      { percent: Math.round((loaded / total) * 100).toFixed(2) },
                      item
                    );
                  }
                }
              },
            }).then((res: dataSourceType) => {
              //直接调接口
              if (res.data.code === "00000 00000") {
                fileList--;
                getResourcePageList();
                message.success(res.data.message);
                if (fileList == 0) {
                  isOpenUpload.value = false;
                  formState.selectGroup.value = selectTreeId.value;
                }
                resourcesForm.value.resetFields();

              } else {
                message.error(res.data.message);
              }
            })
        })

      }
    }).catch((err: any) => {
      throw new Error(err);
    });

};

// 添加用户
const buttonAddUserMessage = async (msg: dataSourceType) => {
  selectUser.value = [];
  //保存
  addmemberrowSelection.value.length && addmemberrowSelection.value.map((item: number | string) => {
    addmemberData.records.length && addmemberData.records.map((jitem: dataSourceType) => {
      let obj: dataSourceType = {}
      if (jitem.id === item) {
        obj.id = jitem.id
        obj.userName = jitem.userName
        if (!selectUser.value.find((sitem: any) => sitem.id === item)) {
          selectUser.value.push(obj)
        }
      }
    })
  })
  isAddUserVisible.value = false
  modAlProps.title = '共享到'
};
// 添加组织
const buttonAddOrgMessage = async () => {
  selectOrg.value = []
  checkedKeys.value.length && checkedKeys.value.map((item: number) => {
    getOrgSelectList(treeDataOrg.value, item)
  })
  isAddOrgVisible.value = false
  modAlProps.title = '共享到'
};

//获取选择的组织
const getOrgSelectList = (data: any, id: number) => {
  data.length && data.map((jitem: dataSourceType) => {
    let obj: dataSourceType = {}
    if (jitem.id === id) {
      obj.id = jitem.id
      obj.name = jitem.name
      if (!selectOrg.value.find((sitem: any) => sitem.id === id)) {
        selectOrg.value.push(obj)
      }
    } else if (jitem.children) {
      getOrgSelectList(jitem.children, id)
    }
  })
}


// 确定共享
const buttonShareMessage = async (msg: dataSourceType) => {
  let selectedOrgIdSet = selectOrg.value.length && selectOrg.value.map((item: dataSourceType) => item.id) || []
  let selectedUserIdSet = selectUser.value.length && selectUser.value.map((item: dataSourceType) => item.id) || []

  let params: any = { resourceIdSet: shareIds.value }
  if (selectedOrgIdSet.length || isSelectOrgAll.value) {
    params.selectedOrgIdSet = isSelectOrgAll.value ? allOrgKey.value : selectedOrgIdSet
  }
  if (selectedUserIdSet.length) {
    params.selectedUserIdSet = selectedUserIdSet
  }
  request.resourceShareResource(params).then((res: any) => {
    if (res.code == "00000 00000") {
      isShareVisible.value = false
      getResourcePageList()
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  }).catch((err: any) => {
    throw new Error(err);
  });

};

//监听组织全选
const changeSelectOrgAll = (e: any) => {
  if (e.target.checked) {
    checkedKeys.value = allOrgKey.value
  } else {
    checkedKeys.value = []
  }
  selectOrg.value = []
}



//切换添加用户分页器
const changePageOrg = (data: { pageCurrent: any; pageSize: any }) => {
  datasOrg = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize
  }
  fetchMemberAdduserPage();
}

//获取当前用户可见组织列表
const geUserorgs = async () => { // 获取表格数据
  const data = (await request.fetchOrganizeUserorgs({ isIncludeVirOrg: false }));
  let reqData = data;
  reqData.forEach((item: any) => {
    item.value = item.name;
    item.disabled = false
  })
  reqData = [{ name: '全部', id: '' }, ...reqData]
  upOrgOptions.value = reqData;
};

// 配置上传文件所需参
const uploadFileResources = async (fileObj: dataSourceType) => {
  formState.uploadFileResource.value.push(cloneDeep(fileObj));
};


// 关闭
const handleClose = (selectItem: dataSourceType, type: string) => {
  if (type === 'org') {
    checkedKeys.value = selectOrg.value.filter((item: any) => item.id !== selectItem.id)
    selectOrg.value = selectOrg.value.filter((item: any) => item.id !== selectItem.id)
  } else {
    selectUser.value = selectUser.value.filter((item: any) => item.id != selectItem.id)
    addmemeberBaseTables.value.selectedRowKeys = selectUser.value.filter((item: any) => item.id != selectItem.id)
  }
}


//打开添加组织弹窗
const openSelectOrg = async () => {
  const data = await request.fetchUserOrgList();
  if (selectOrg.value.length) {
    checkedKeys.value = selectOrg.value.map((item: dataSourceType) => item.id)
  }
  nextTick(() => {
    treeDataOrg.value = data;
    isAddOrgVisible.value = true
    modAlProps.title = "添加组织";
  })
}


//打开添加用户弹窗
const openSelectUser = () => {
  if (selectUser.value.length) {
    addmemeberBaseTables.value.selectedRowKeys = selectUser.value.map((item: dataSourceType) => item.id);
  }
  fetchMemberAdduserPage()
  geUserorgs();
}

const changeMember = (e: string, options: any) => {//获取添加上级组织id
  nextTick(() => {
    fetchMemberAdduserPage();
  })
}
const getSourceType = (type: any) => {
  let sourceType = type == 1 ? "图片" : type == 2 ? '视频' : type == 3 ? '音频' : type == 4 ? '附件' : '文档';
  return sourceType;
}
const customRow = (record: dataSourceType) => {

  return {
    // 鼠标移入行
    onClick: (event: any) => {
      console.log(event, 'event');
      if (event.target.innerText !== '重命名' && event.target.localName != 'input') {
        renameIndex.value = -1
      }
    },
  };
}
const treeToTile = (treeData: any[], childKey = "children") => {
  //用于拍平数据， 可考虑公用global.ts中使用
  const arr: any[] = [];
  const expanded = (data: any[], com: any) => {
    if (data && data.length > 0) {
      data
        .filter((d) => d)
        .forEach((e) => {
          if (com) {
            if (!com.includes('layouts')) {
              arr.push(e);
            } else {

            }
          } else {
            arr.push(e);
          }
          expanded(e[childKey] || [], e.component);
        });
    }
  };
  expanded(treeData, '');
  return arr;
};

//onmounted
onMounted(async () => {
  routerPerm().includes('creatAble') ? creatAble.value = false : creatAble.value = true;
  routerPerm().includes('uploadAble') ? uploadAble.value = false : uploadAble.value = true;
  routerPerm().includes('detailAble') ? detailAble.value = false : detailAble.value = true;
  routerPerm().includes('renameAble') ? renameAble.value = false : renameAble.value = true;
  routerPerm().includes('shareAble') ? shareAble.value = false : shareAble.value = true;
  routerPerm().includes('moveAble') ? moveAble.value = false : moveAble.value = true;
  routerPerm().includes('deleteAble') ? deleteAble.value = false : deleteAble.value = true;
  routerPerm().includes('downloadAble') ? downloadAble.value = false : downloadAble.value = true;
  routerPerm().includes('offShareAble') ? offShareAble.value = false : offShareAble.value = true;
  fetchResourceGroupTreeList();
  getResourcePageList()
  resourceFileTypeList()
});
</script>

<style lang="less" scoped>
.myResourcesIndex {
  width: 100%;
  // background: #fff;
  // padding-bottom: 24px;
  height: calc(100% - 56px);
  display: flex;
  background-color: #fff;
  padding: 16px;
  overflow: auto;

  .icon-search {
    font-size: 14px !important;
  }

  .side-left {
    width: 216px;
    height: calc(100% - 24px);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    padding-right: 4px;
    position: relative;
    transition: width 0.3s;
    padding-right: 24px;

    .treeBox {
      height: 100%;
    }

    .treeTitle {
      margin-top: 16px;
      margin-bottom: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      background: #edf7ff;
      border-radius: 2px;
      padding: 0 4px;

      .openorclose {
        cursor: pointer;
        display: flex;
        align-items: center;
      }
    }

    .open-right {
      position: absolute;
      top: 50%;
      right: -1px;
      margin-top: -15px;
      bottom: -20px;
      height: 30px;
      width: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.06);
      z-index: 2;
    }

    .open-right-side {
      right: -20px;
    }

    .iconfont:hover {
      color: rgba(0, 0, 0, 0.6);
    }

    .iconfonts {
      color: rgba(0, 0, 0, 0.45);
    }
  }

  .side-close {
    width: 0;
    transition: width 0.3s;

    .treeBox {
      display: none;
    }
  }

  .myResourcesRight {
    width: 500px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    flex: 1;
    height: 100%;
    padding: 0 24px;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .select-content {
      margin-top: 24px;
      background: rgba(0, 0, 0, 0.02);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 24px 24px 0;

      // margin-bottom: 24px;
      //   .selectLeft {
      //     display: flex;
      //     flex-direction: row;
      //     justify-content: space-between;
      //     align-items: center;
      //     flex-wrap: wrap;
      //     flex: 1;
      //   }
      .select-item {
        // width: 354px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 24px;

        .title {
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
        }

        .titleSelect {
          width: 205px;
          margin-right: 12px;
        }
      }

      .option-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 24px;
        width: 277px;
      }

      .option-content .openorclose {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 16px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #1f6ded;

        .iconfont {
          margin-left: 5px;
        }
      }
    }
  }

  :deep(.ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
    padding-right: 16px;
  }

  .eidtRecords {
    margin-right: 16px;
  }

  .eidtRecords:last-child {
    margin-right: 0;
  }

  ::v-deep(.titleBox) {
    display: flex;
    align-items: center;
    justify-items: center;

    // height: 29px;
    // line-height: 29px;
    // height: 18px;
    .titleTip {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 16px;
    }

    .tabletypeImgBox {
      width: 80px;
      height: 80px;
      padding: 8px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 48px;
        opacity: 1;
      }
    }

    .tabletypeImg {
      max-width: 64px;
      width: auto;
      max-height: 64px;

      height: auto;
      margin: auto;
      //   width: 16px;
      //   height: 16px;
      // line-height: 18px;
    }
  }

  ::v-deep(.ant-table-cell) {
    vertical-align: middle;
  }
}

.disable {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.share-box {
  display: flex;
  flex-direction: column;

  .share-org {
    margin-top: 24px;
    display: flex;
    flex-direction: column;

    .share-org-title {
      display: flex;
      flex-direction: row;
      align-items: center;

      .share-org-title-add {
        margin-left: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-new {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          margin-right: 4px;
          width: 24px;
          height: 24px;
          line-height: 24px;
          border-radius: 50%;
          color: #1f6ded;
        }
      }

      .checkbox-all {
        margin-left: 24px;
      }

      .share-org-title-text {
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 14px;
      }
    }

    .share-org-content {
      margin-top: 8px;
      width: 592px;
      min-height: 40px;
      padding: 8px;
      background: #FFFFFF;
      border-radius: 2px;
      opacity: 1;
      border: 1px dashed rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .org-user-list {}
    }
  }

  .share-org:first-child {
    margin-top: 0;
  }
}


::v-deep(.ant-table-tbody > tr > td:nth-last-of-type(1)) {
  text-align: right;
}

.baseTable {
  position: relative;
}

.baseTable .aTable {
  max-height: 450px;
  height: fit-content;
  overflow: auto;
}

.resource_modal {
  ::v-deep(.ant-modal-wrap .ant-modal-body) {
    padding: 24px 24px 0;
  }
}





.column-text {
  min-width: 167px;
  position: relative;
  margin-left: -4px;

  .res-tree-menus {
    margin: 0;
    top: 28px;
    right: 6px;
    background: #fff;
    z-index: 44;
    position: absolute;
    list-style-type: none;
    min-width: 88px;
    padding: 5px 0;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0px -3px 16px 0px rgba(89, 155, 255, 0.15);

    li {
      margin: 0;
      padding: 0 20px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      line-height: 32px;
      color: rgba(0, 0, 0, 0.85);

      &:hover {
        background: rgba(0, 0, 0, 0.04);
      }
    }
  }
}



.table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 24px;

  .org-text {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 14px;
  }
}

.searchContent {
  margin-left: 8px;

  .icon-search {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.45);
    position: absolute;
    right: 12px;
    top: 0px;
  }
}

.modal-select {
  width: 288px;
}


.contentIndexLeft {
  padding-right: 24px;
  width: 216px;
  height: 100%;
}

::v-deep(::-webkit-scrollbar) {
  height: 10px;
}

::v-deep(.side-left .ant-tree-list-holder) {
  width: auto;
  height: 100%;
  transition: width 0.3s;
}

::v-deep(.side-close .ant-tree-list-holder) {
  width: 0;
  height: 100%;
  transition: width 0.3s;
}

::v-deep(.side-left .ant-tree-list:hover .ant-tree-list-scrollbar) {
  display: block !important;
}

::v-deep(.ant-tree-list .ant-tree-list-scrollbar) {
  display: none !important;
}

::v-deep(.ant-tree-list-scrollbar-thumb) {
  background: rgba(0, 0, 0, 0.15) !important;
}

::v-deep(.ant-checkbox + span) {
  padding-left: 8px;
  padding-right: 0;
}

::v-deep(.ant-table-wrapper) {
  margin-top: 24px;
}

::v-deep(.ant-table-thead > tr > th) {
  // padding: 16px 0 16px 16px;
}

table tr th.ant-table-selection-column,
table tr td.ant-table-selection-column {
  padding-right: 8px;
  padding-left: 8px;
  text-align: left;
}
</style>
<style lang="scss">
.addMember_modal {
  .modal_table {
    height: 100%;
    overflow: hidden;
  }
}
</style>

<style lang="less">
.side-left {
  .ant-input-search {
    margin-top: 16px;
  }

  .ant-tree {
    height: calc(100% - 88px);
    overflow: auto;
    margin-top: 16px;

    .ant-tree-treenode {
      width: 100%;

      .ant-tree-node-content-wrapper {
        width: 100%;
      }
    }

    .ant-tree::-webkit-scrollbar {
      display: none;
    }

    .ant-tree:hover::-webkit-scrollbar {
      display: block;
    }

    .ant-tree-list-scrollbar-thumb {
      height: auto !important;
    }

    .ant-tree-list-holder {
      overflow-y: unset !important;
    }
  }
}

.ant-image-preview-img-wrapper {

  // left: 50%;
  // transform: translateX(-50%);
  img {
    display: inline-block;
  }
}
</style>
<style lang="less">
.addOrgUser_modal {
  .ant-modal-content {
    .ant-modal-body {
      min-height: 216px;
    }
  }

}

.div-input {
  box-sizing: border-box;
  margin: 0;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 0;
  padding: 4px 11px;
  color: #000000d9;
  font-size: 14px;
  line-height: 1.5715;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  transition: all .3s;

  &:hover {
    border-color: var(--theme_button_bg_color, #4892fa);
    box-shadow: 0 0 0 2px var(--theme_input_focus_shadow_color, #c4e3ff);
    border-right-width: 1px !important;
    outline: 0;
  }
}
</style>
